<template>
	<view class="content_box">
		<view class="first-top">
			<swiper class="first-swiper" autoplay="true" interval="3000" duration="500" @change="onSwiperChange">
				<swiper-item v-for="(item, index) in swiperImg" :key="index">
					<img class="first_background" :src="item" alt="轮播图">
				</swiper-item>
			</swiper>
			<!-- 轮播条 -->
			<view class="swiper-indicator">
				<view class="indicator-dots">
					<view 
						class="indicator-dot" 
						v-for="(item, index) in swiperImg" 
						:key="index"
						:class="{ active: currentSwiperIndex === index }"
					></view>
				</view>
			</view>
			
			<view class="first-banner">
				<view class="banner-box" @click="go('home/rights')">
					<img src="@/static/images/index/会员权益.png" />
					<text>会员权益</text>
				</view>
				<view class="banner-box" @click="go('home/promotion')">
					<img src="@/static/images/index/客服中心.png" />
					<text>客服中心</text>
				</view>
				<view class="banner-box" @click="go('home/income')">
					<img src="@/static/images/index/邀请代理.png" />
					<text>邀请代理</text>
				</view>
				<view class="banner-box" @click="kefu()">
					<img src="@/static/images/index/关注公众号.png" />
					<text>关注公众号</text>
				</view>
			</view>
		</view>

		<view class="title-box">
			<text class="title-text">
				产品中心
			</text>
			<text class="more" @click="go('home/more')">MORE ></text>
		</view>


		<view class="report-box">
			<view class="report-content">
				<view class="report-left">
					<view class="report-title">信用报告查询</view>
					<view class="report-subtitle">查询司法, 逾期记录, 贷款申请</view>
				</view>
				<view class="report-right">
					<view class="report-action" @click="go('home/popularize')">立即推广></view>
					<view class="report-icon">
						<img src="@/static/images/index/信用报告.png" alt="报告图标" />
					</view>
				</view>
			</view>
		</view>

		<view class="report-box">
			<view class="report-content">
				<view class="report-left">
					<view class="report-title">企业纳税信息</view>
					<view class="report-subtitle">查询企业司法, 税务, 工商信息</view>
				</view>
				<view class="report-right">
					<view class="report-action" @click="go('home/popularize')">立即推广></view>
					<view class="report-icon">
						<img src="@/static/images/index/企业纳税信息.png" alt="企业图标" />
					</view>
				</view>
			</view>
		</view>

		<!-- 最新成交报告 -->
		<view class="transaction-report">
			<view class="report-header">
				<text class="report-title">最新成交报告</text>
				<text class="report-summary">今日已提交<text class="report-count">{{todayTotal}}</text>份</text>
			</view>
			<view class="report-list">
				<view class="report-item" v-for="(item, index) in recentTransactions" :key="index">
					<view class="item-info">
						<view class="user-info">{{formatPhone(item.nickName)}}查询了报告</view>
						<view class="amount-time">
							<view class="amount">¥{{item.amount}}</view>
							<view class="item-time">{{formatTime(item.time)}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view id="bgw">
			<view id="bg" class="third-box cplb" @click="pause()">
				<view v-for="(item, index) of PRO" class="third-banner"
					:style="{backgroundImage: 'url(/static/images/index/p_'+item.code+'.png)'}"> -->
					<!-- 					{{item.id}}-->
					<!-- <view class="name">{{item.name}}</view> 
					<view class="detail_text">
						<text>客户查询价</text>
					</view>
					<view class="jia" @click="go('home/popularize?id=' + item.id)"> -->
						<!-- <text class="lit_jia">￥</text> -->
						<!-- <text class="big_jia">查看</text>
					</view>
				</view>
			</view>
		</view> -->

	<!-- 	<view class="title-box">
			<text class="title-text">
				规划服务
			</text>
			<text class="more">更多规划 ></text>
		</view>
		<view id="bgy">
			<view class="plan">
				<view class="third-banner cc" style="background-image: url(/static/images/index/p_zyflgh.png);">
					<view class="detail_text">
						<text>客户查询价</text>
					</view>
					<view class="jia" @click="msg()">
						<text class="big_jia">查看</text>
					</view>
				</view>
				<view class="third-banner cc" style="background-image: url(/static/images/index/p_qyflgh.png);">
					<view class="detail_text">
						<text>客户查询价</text>
					</view>
					<view class="jia" @click="msg()">
						<text class="big_jia">查看</text>
					</view>

				</view>
			</view>
		</view> -->

		<!-- <view class="title-box">
			<text class="title-text">
				最新资讯
			</text>
			<text class="more" @click="to('home/new')">更多 ></text>
		</view>
		<view class="four_box">
			<view class="four_banner">
				<view v-if="consult[0]" class="four-item">
					<view class="four-img">
						<img :src="consult[0].headImg" />
					</view>
					<view class="four-text" @click="to('home/consult?id='+consult[0].id)">
						<view class="four-top">
							{{consult[0].title}}
							<!-- 2025年全国数据资源调查报告发布2025年全国数据资源调查报告发布2025年全国数据资源调查报告发布2025年全国数据资源调查报 
						</view>
						<view class="four-time">
							{{consult[0].createTime}}
						</view>
					</view>
				</view>

				<template v-if="consult[1]">
					<hr class="half" />
					<view class="four-item">
						<view class="four-img">
							<img :src="consult[1].headImg" />
						</view>
						<view class="four-text" @click="to('home/consult?id='+consult[1].id)">
							<view class="four-top">
								{{consult[1].title}}
							</view>
							<view class="four-time">
								{{consult[1].createTime}}
							</view>
						</view>
					</view>
				</template>
			</view>
		</view> -->



		<!-- <view class="five-box">
			<view>
				<text class="five-big">
					收入排行榜
				</text>
				<text class="five-text">今日已成交<text class="num">{{todayTotal}}</text>份</text>
			</view>
			<table id="table">
				<tr>
					<th class="qp"></th>
					<th class="qp">排名</th>
					<th class="qp">昵称</th>
					<th>总收入</th>
				</tr>
				<tr v-for="(item,index) of ranking">
					<td>
						<img :src="'/static/images/index/'+index+'.png'" />
					</td>
					<td>{{index+1}}</td>
					<td class="hp">{{item.nickName}}</td>
					<td class="hp">{{zeroTwo(item.amount)}}</td>
				</tr>
			</table>
		</view> -->

		<uni-popup ref="alertDialog">
			<uni-popup-dialog type="info" :showClose="false" confirmText="我知道了" title="系统通知"
				:content="firstUnRead.title" @confirm="dialogConfirm(firstUnRead.id)" />
		</uni-popup>

		<!-- 普通弹窗 -->
		<uni-popup ref="imgDialog" background-color="#FFF" borderRadius="10px 10px 10px 10px">
			<image style="width: 70vw;margin: 10px;" mode="widthFix" :src="serveImg" />
		</uni-popup>
	</view>
</template>
<script>
	import {
		index,
		indexNotice,
		readRecord,
		recently
	} from '@/api/index'

	import {
		posterImg
	} from "@/api/product";

	export default {
		data() {
			return {
				PRO: [],
				more: false,
				serveImg: null,
				consult: [],
				ranking: [],
				todayTotal: null,
				firstUnRead: {},
				swiperImg: [],
				recentTransactions: [],
				currentSwiperIndex: 0
			}
		},
		created() {
			// 初始化轮播图数据
			this.initSwiperImages()
			
			index().then(res => {
				console.log(res)
				if (res.serveImg[0]) {
					this.serveImg = res.serveImg[0]
				}
				this.PRO = res.PRO
				this.more = res.more
				this.consult = res.consult
				this.ranking = res.income.ranking
				this.todayTotal = res.income.todayTotal
				if (res.swiperImg) {
					res.swiperImg.forEach(i_ => {
						this.swiperImg.push(i_.url)
					})
				}
			})
			
			// 获取最新成交报告数据
			this.getRecentTransactions()
		},
		onShow() {
			if (this.isLogin()) {
				indexNotice().then(res => {
					if (res.data) {
						this.firstUnRead = res.data
						this.$refs.alertDialog.open('center')
					}
				})
			}
		},
		methods: {
			msg() {
				this.$modal.msg("功能开发中...")
			},
			openServeImg() {
				this.$refs.imgDialog.open('center')
			},
			pause() {
				let bg = document.getElementById('bg')
				// bg.classList.remove("cplb");
			},
			dialogConfirm(id) {
				readRecord(id)
			},
			kefu() {
				window.location.href = "http://www.funishe.com/chat.html"
			},
			getRecentTransactions() {
				// 使用模拟数据
				this.recentTransactions = [
					{
						nickName: '16312345678',
						amount: '12.01',
						time: new Date(Date.now() - 12 * 60 * 1000).toISOString() // 12分钟前
					},
					{
						nickName: '13887654321',
						amount: '15.50',
						time: new Date(Date.now() - 25 * 60 * 1000).toISOString() // 25分钟前
					},
					{
						nickName: '15998765432',
						amount: '8.99',
						time: new Date(Date.now() - 45 * 60 * 1000).toISOString() // 45分钟前
					},
					{
						nickName: '18612345678',
						amount: '22.80',
						time: new Date(Date.now() - 68 * 60 * 1000).toISOString() // 68分钟前
					}
				]
				
				// 真实API调用（注释掉）
				// recently(1).then(res => {
				// 	if (res.code == 200 && res.data) {
				// 		// 只取前4条数据
				// 		this.recentTransactions = res.data.slice(0, 4)
				// 	}
				// }).catch(err => {
				// 	console.error('获取最新成交报告失败:', err)
				// })
			},
			formatPhone(phone) {
				if (!phone) return ''
				// 如果是手机号格式，进行脱敏处理
				if (phone.length >= 11) {
					return phone.substring(0, 3) + '****' + phone.substring(7)
				}
				return phone
			},
			formatTime(timeStr) {
				if (!timeStr) return ''
				// 将时间格式化为"X分钟前"的格式
				const now = new Date()
				const time = new Date(timeStr)
				const diff = now - time
				const minutes = Math.floor(diff / (1000 * 60))
				
				if (minutes < 1) return '刚刚'
				if (minutes < 60) return `${minutes}分钟前`
				
				const hours = Math.floor(minutes / 60)
				if (hours < 24) return `${hours}小时前`
				
				const days = Math.floor(hours / 24)
				return `${days}天前`
			},
			initSwiperImages() {
				// 使用指定的图片路径
				this.swiperImg = [
					'/static/images/index/home_swiper/1.png',
					'/static/images/index/home_swiper/2.png',
					'/static/images/index/home_swiper/3.jpg',
					'/static/images/index/home_swiper/4.png'
				]
			},
			onSwiperChange(e) {
				// 轮播图切换事件
				this.currentSwiperIndex = e.detail.current
			}
		}
	}
</script>
<style scoped lang="scss">
	.content_box {
		width: 100vw;
		height: 100vh;
		padding: 0;
		margin: 0;
		background-image: url('@/static/images/index/bg.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		min-height: 100vh;
		
		
	}

			.first-top {
			width: 100%;
			height: 60vw;
			position: relative;
			z-index:999;
		

							.first-swiper {
			width: 100%;
			height: 60vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;

			.first_background {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.swiper-indicator {
			position: absolute;
			bottom: 30px;
			left: 50%;
			transform: translateX(-50%);
			z-index: 10;
			
			.indicator-dots {
				display: flex;
				gap: 8px;
				
				.indicator-dot {
					width: 20px;
					height: 4px;
					border-radius: 2px;
					background-color: rgba(255, 255, 255, 0.5);
					transition: all 0.3s ease;
					
					&.active {
						background-color: #FFFFFF;
						transform: scale(1.2);
					}
				}
			}
		}

		.first-banner {
			position: absolute;
			bottom: -15vw;
			left: 2vw;

			right: 2vw;
			background-color: #FFFFFF;
			border-radius: 3vw;
			padding: 1.5vw 2vw;
			display: flex;
			justify-content: space-around;
			align-items: center;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

			.banner-box {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				flex: 1;
				padding: 1.5vw 1vw;

				img {
					width: 10vw;
					height: 10vw;
					margin-bottom: 1.5vw;
				}

				text {
					font-size: 2.8vw;
					color: #333;
					text-align: center;
				}
			}
		}
	}

	.title-box {
		padding: 4vw 2vw 0 2vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15vw 0 6vw 0;
		/* background-color: pink; */
		background-image: linear-gradient(0deg, #f6f8fc00 0%, #E9EEF8 100%);

		.title-text {
			font-family: PingFangSC;
			font-weight: 600;
			font-size: 16px;
			color: #222222;
			letter-spacing: 0;
			line-height: 1.2;
			margin-left: 10px;

			.more {
				width: 110px;
                height: 40px;
                font-family: PingFangSC-Regular;
                font-weight: 400;
                font-size: 28px;
                color: #494848;
                letter-spacing: 0;
                text-align: center;
			}
		}
	}

	@keyframes scroll_ {
		0% {
			transform: translateX(10%);
		}

		50% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(10%);
		}
	}

	#bgw {
		// background-color: red;
		width: 100vw;
		overflow: hidden;
		overflow-x: auto;
		white-space: nowrap;
	}

	// .cplb {
	// 	display: flex;
	// 	animation: scroll_ 28s linear infinite;
	// 	animation-play-state: running;
	// }

	.plan {
		display: flex;
		justify-content: space-around;
	}

	.third-box, .plan {


		.third-banner {
			display: inline-block;
			width: 35vw;
			height: 38vw;

			margin-bottom: 1vw;
			flex-shrink: 0;
			flex-grow: 0;
			position: relative;

			background-size: 100% 100%;
			background-repeat: no-repeat;
			
			.name{
				margin: 2vw 2.5vw;
				font-weight: bold;
			}

			.detail_text {
				width: 55%;
				line-height: 5vw;
				color: #fff;
				font-size: 3vw;

				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 0;
				left: 0;
			}

			.jia {
				width: 45%;
				height: 6vw;
				color: #a25122;
				display: flex;
				/* opacity: 0.6; */
				justify-content: center;
				align-items: center;
				position: absolute;
				bottom: 0;
				right: 0;

				.lit_jia {
					font-size: 4vw;
					margin-left: -2vw;
				}

				.big_jia {
					font-size: 4.4vw;
					font-weight: bold;
				}
			}
		}


		.cc {
			width: 46vw;
			height: 38vw;
		}
	}

	.four_box {
		padding: 0 2vw;

		.four_banner {
			background-color: #fff;
			border-radius: 3vw;
			margin-bottom: 2vw;

			.four-item {
				height: 22vw;
				padding: 0 2vw;
				display: flex;
				justify-content: center;
				gap: 5vw;
				align-items: center;

				.four-img {
					height: 16vw;
					width: 16vw;

					img {
						width: 100%;
						height: 100%;
					}
				}

				.four-text {
					width: 67vw;
					height: 20vw;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.four-top {
						margin-top: 7px;
						font-size: 3.4vw;
						font-weight: bold;
					}

					.four-time {
						margin-bottom: 7px;
						font-size: 3.2vw;
						color: #a6a6a6;
					}
				}

				.half {
					border: none;
					border-top: 2px dashed black;
					margin: 20px 0;
				}
			}
		}
	}

	.five-box {
		margin: 0 2vw;
		border-radius: 2vw;
		width: 96vw;
		padding: 2vw 4vw;
		margin-bottom: 3vw;
		background-image: url(@/static/images/five_background.png);
		background-size: 100% auto;
		background-repeat: no-repeat;

		.five-big {
			font-size: 4vw;
			font-weight: bold;
			color: #366279;
			margin-right: 4vw;
		}

		.five-text {
			font-size: 3.5vw;
		}


		#table {
			width: 100%;
			margin-top: 5px;

			th, td {
				text-align: center;
				padding: 6px;
			}

			.hp {
				width: 35%;
				color: #d1915d;
			}

			img {
				width: 20px;

			}
		}
	}

	.report-box {
		width: 96vw;
		height:110px;
		background-image: linear-gradient(0deg, #FFFFFF 71%, #E8F0FF 100%);
		border-radius: 15px;
		margin: 0 2vw 2vw 2vw;
		position: relative;
		overflow: visible;

		.report-content {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100%;
			padding: 0 20px;
			width: 100%;
			gap: 20px;

			.report-left {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				flex: 1;
				min-width: 0;

				.report-title {
					font-family: PingFangSC;
					font-weight: 600;
					font-size: 15px;
					line-height: 1.2;
					color: #222222;
					letter-spacing: 0;
					text-align: left;
					margin-bottom: 8px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					width: 100%;
				}

				.report-subtitle {
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 15px;
					color: #666666;
					letter-spacing: 0;
					text-align: left;
					line-height: 1.4;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					width: 100%;
				}
			}

			.report-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;
				gap: 12px;
				flex-shrink: 0;
				min-width: 100px;

				.report-action {
					font-size: 12px;
					color: #007AFF;
					cursor: pointer;
					font-weight: 500;
					text-align: right;
					white-space: nowrap;
					font-family: PingFangSC;
					transition: color 0.3s ease;
					
					&:hover {
						color: #0056b3;
					}
				}

				.report-icon {
					width: 50px;
					height: 50px;
					border-radius: 8px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-shrink: 0;
					transition: all 0.3s ease;

					&:hover {
						transform: scale(1.05);
					}

					img {
						width: 32px;
						height: 32px;
						object-fit: contain;
					}
				}
			}
		}
	}

			.transaction-report {
			width: 96vw;
			height: 300px;
			margin: 0 2vw 2vw 2vw;
			border-radius: 15px;
			background-color: #FFFFFF;
			padding: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		background-color: linear-gradient(0deg, #FFFFFF 71%, #E8F0FF 100%);;

		.report-header {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.report-title {
				font-family: PingFangSC;
				font-weight: 600;
				font-size: 16px;
				color: #222222;
				letter-spacing: 0;
				line-height: 1.2;
			}

			.report-summary {
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 14px;
				color: #666666;
				letter-spacing: 0;
				margin-left: 10px;
			}

			.report-count {
				color: #FF7433;
				font-weight: bold;
			}
		}

		.report-list {
			.report-item {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				padding: 8px 0;
				border-bottom: 1px solid #f5f5f5;

				&:last-child {
					border-bottom: none;
				}

				.item-info {
					display: flex;
					flex-direction: column;
					gap: 4px;
					flex: 1;

					.user-info {
						font-family: PingFangSC-Regular;
						font-weight: 400;
						font-size: 14px;
						color: #333333;
						letter-spacing: 0;
					}

					.amount-time {
						display: flex;
						justify-content: space-between;
						align-items: center;
						gap: 10px;

						.amount {
							font-family: PingFangSC;
							font-weight: 600;
							font-size: 16px;
							color: #FF7433;
							letter-spacing: 0;
						}

						.item-time {
							font-family: PingFangSC-Regular;
							font-weight: 400;
							font-size: 12px;
							color: #999999;
							letter-spacing: 0;
							text-align: right;
						}
					}
				}
			}
		}
	}
</style>
